<template>
	<syt-tree-table style="width: 100%" :data="treeData">
		<syt-tree-table-column label="分类" prop="cName" :span-data="spanData" width="50px"></syt-tree-table-column>
		<syt-tree-table-column label="名称" prop="name"></syt-tree-table-column>
		<syt-tree-table-column label="操作">
			<template #default="scope">
				<button size="mini" type="warn" @click="handleDelete(scope.row)"> 删除 </button>
			</template>
		</syt-tree-table-column>
	</syt-tree-table>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';

	const treeData = ref([{
			cId: 2,
			cPid: 1,
			name: 'aa',
			cName: '2'
		},
		{
			cId: 2,
			cPid: 1,
			name: 'bb',
			cName: '2'
		},
		{
			cId: 4,
			cPid: 3,
			name: 'ee',
			cName: '4'
		},
		{
			cId: 5,
			cPid: 3,
			name: 'dd',
			cName: '5'
		}
	])
	const spanData = reactive({
		id: 'cId',
		pid: 'cPid',
		reference: [{
				cId: 1,
				cPid: 0,
				cName: '1'
			},
			{
				cId: 2,
				cPid: 1,
				cName: '2'
			},
			{
				cId: 3,
				cPid: 1,
				cName: '3'
			},
			{
				cId: 4,
				cPid: 3,
				cName: '4'
			},
			{
				cId: 5,
				cPid: 3,
				cName: '5'
			}
		]
	})

	const handleDelete = (row) => {
		const index = treeData.value.findIndex(item => item.name == row.name)

		if (index > -1) treeData.value.splice(index, 1)
	}
</script>

<style>

</style>